<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script>
    <srcipt src="vue.js"></srcipt>
    <style>
        #app {
            width: 1000px;
            height: 250px;
            /*background-color: yellow;*/
        }

        tr:nth-child(1) {
            text-align: left;
            text-align: center;
            position: relative;
        }

        tr td {
            border: 1px solid;
            text-align: center;
        }

        tr th {
            border: 1px solid;
            text-align: center;
        }

        table {
            margin: 0 auto;
        }


    </style>
</head>

<body>

<table id="app" border="0px" cellpadding="0" cellspacing="0" width="700px">
    <tr>
        <td>编号</td>
        <td>名称</td>
        <td>单价</td>
        <td>数量</td>
        <td>总价</td>
    </tr>
    <tr>
        <td >1</td>
        <td >apple</td>
        <td >3</td>
        <td>
            <button >+</button>
            <span>2</span>
            <button >-</button>
        </td>
        <td>6</td>
    </tr>
    <tr>
        <td>2</td>
        <td>pear</td>
        <td>4</td>
        <td>
            <button>+</button>
            <span>3</span>
            <button>-</button>
        </td>
        <td>12</td>
    </tr>
    <tr>
        <td>3</td>
        <td>banaer</td>
        <td>5</td>
        <td>
            <button>+</button>
            <span>4</span>
            <button>-</button>
        </td>
        <td>20</td>
    </tr>
    <tr>
        <td  colspan="5">
            总价：￥38
        </td>
    </tr>
</table>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            table:
        }
    })
</script>

</body>
</html>